﻿@using ZhouYu.DreamTour.Model;
@using ZhouYu.DreamTour.Web.Models;
@{
    var UserInfo = UserInfoContext.userInfoContext.UserInfo;
    var Bank = ViewBag.Bank as List<User_Bank>;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <title>银行卡提现</title>

    <link href="~/css/style.css" rel="stylesheet" type="text/css" />
    <link href="~/css/common.css" rel="stylesheet" type="text/css" />
    <link href="~/layui-v2.5.4/layui/css/modules/layer/default/layer.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="~/layui-v2.5.4/layui/css/layui.css" />
    <link rel="stylesheet" href="~/css/admin.css" />
    <link rel="stylesheet" href="~/css/spin.css">
    <link rel="stylesheet" href="~/css/notiflix-1.3.0.min.css">
    <link href="~/css/bs4.pop.css" rel="stylesheet" type="text/css" />
    <style>
        th {
            margin-left: 10%;
        }

        td {
            width: 60%;
        }

        #mb {
            display: none;
            height: 100%;
            width: 100%;
            position: fixed;
            *position: absolute;
            *height: 1380px;
            background: black;
            top: 0;
            left: 0;
            opacity: 0.6;
        }

        #alert-container-center {
            top: 6%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .alert-container {
            position: fixed;
        }

        .alert {
            position: relative;
            padding: 0.75rem 1.25rem;
            margin-bottom: 1rem;
            border: 1px solid transparent;
            border-radius: 0.25rem;
        }

        .alert-dismissible {
            padding-right: 4rem;
        }

        .alert-primary {
            color: #004085;
            background-color: #cce5ff;
            border-color: #b8daff;
        }

        .alert-container .alert {
            box-shadow: 0 5px 5px rgba(0,0,0,0.1);
        }

        .alert-dismissible .close {
            position: absolute;
            top: 0;
            right: 0;
            padding: 0.75rem 1.25rem;
            color: inherit;
        }

        button.close {
            padding: 0;
            background-color: transparent;
            border: 0;
            -webkit-appearance: none;
        }

        .close {
            float: right;
            font-size: 1.5rem;
            font-weight: 700;
            line-height: 1;
            color: #000;
            text-shadow: 0 1px 0 #fff;
            opacity: .5;
        }

        .fade.show {
            opacity: 1;
        }

        .fade {
            opacity: 0;
            transition: opacity 0.15s linear;
        }

        .alert-danger {
            color: #721c24;
            background-color: #f8d7da;
            border-color: #f5c6cb;
        }

        .alert-dismissible {
            padding-right: 4rem;
        }
    </style>
</head>
<body>
    <div class="top_hw clearfix">
        <div class="top_h clearfix">
            <div class="top_hl"><span>欢迎来到中国梦想游，让你的梦想全程免费自由行！</span> 预定热线：<b>0571-63322269</b></div>
            <div class="top_hr">
                @if (UserInfo == null)
                {
                    <a href="/Home/User_Register">会员注册</a>
                    <span>|</span> <a href="/Home/User_Login">登录</a>
                    <span>|</span> <a href="#">梦想收藏</a> <span>|</span> <a href="#">设为首页</a>
                    @*<a>
                            欢迎你，来到新世界旅行网！
                        </a>*@
                }
                else
                {
                    <a href="/Home/User_Center">会员中心</a>
                    <span>|</span> <a href="#">梦想收藏</a> <span>|</span> <a href="#">设为首页</a> <span>|</span> <a href="/Login/LoginOut">退出</a> <span>|</span>
                    <a>
                        欢迎你，<span>@UserInfo.User_Name</span>来到新世界旅行网！
                    </a>
                }
            </div>
        </div>
    </div>
    <div class="head_w">
        <div class="head_t clearfix">
            <div class="logo"><img src="~/images/logo.jpg"></div>
            <div class="rx_line"><img src="~/images/rx.jpg"></div>
        </div>
    </div>
    <div class="mainNav clearfix">
        <ul class="Nav_ul">
            <li><a href="/Home/Index">首页</a><img src="~/images/nav_line.jpg"></li>
            <li><a href="/Home/Route">旅游路线</a><img src="~/images/nav_line.jpg"></li>
            <li><a href="/Home/Scenic">旅游景点</a><img src="~/images/nav_line.jpg"></li>
            <li><a href="/Home/CateringAccommodation">餐饮住宿</a><img src="~/images/nav_line.jpg"></li>
            <li><a href="/Home/Traffic_DatailsOne">交通线路</a><img src="~/images/nav_line.jpg"></li>
            <li><a href="/Home/Group">旅游团购</a><img src="~/images/nav_line.jpg"></li>
            <li><a href="/Home/Specialty">地方特产</a><img src="~/images/nav_line.jpg"></li>
            <li><a href="/Home/AutoGenerationIntro">自动生成简介</a><img src="~/images/nav_line.jpg"></li>
            <li><a href="/Home/Team_Join">团队简介</a><img src="~/images/nav_line.jpg"></li>
            <li><a href="/Home/Itinerary_Details">行程导航</a></li>
        </ul>
    </div>
    <div class="b_wrap">
        <div class="current"><span>当前所在地：</span><a href="/Home/Index">首页</a> >> <a href="/Home/User_Center">会员中心</a></div>
        <div class="fmember">
            <div class="fmleft">
                <div class="fmleft_top"><img src="~/images/fmbt1.png" border="0"></div>
                <div class="fmlist">
                    <ul>
                        <li class="f1">订单中心</li>
                        <li> >><a href="/Home/User_Order">我的订单</a> </li>
                        <li> >><a href="/Home/User_Colleague">发布结伴同行</a> </li>
                        <li> >><a href="/Home/User_Apply">我申请的结伴同行</a> </li>
                        <li> >><a href="/Home/User_Comment">我的点评</a> </li>
                        <li class="f2"> >><a href="/Home/User_Questions">我的提问</a> </li>
                    </ul>
                    <ul>
                        <li class="f1">我的优惠卡券</li>
                        <li> >><a href="/Home/User_CashAccount">现金账号</a> </li>
                        <li> >><a href="/Home/User_AllowanceVol">抵用券</a> </li>
                        <li class="f2"> >><a href="/Home/User_TouristVol">旅游券</a> </li>
                    </ul>
                    <ul>
                        <li class="f1">账户信息</li>
                        <li> >><a href="/Home/User_Data">个人资料</a> </li>
                        <li> >><a href="/Home/User_AccountSecurity">账户安全</a> </li>
                        <li> >><a href="/Home/User_Integral">我的积分</a> </li>
                        <li> >><a href="/Home/User_UpdatePwd">修改密码</a> </li>
                        <li class="f2"> >><a href="/Home/User_Address">配送地址</a> </li>
                    </ul>
                </div>
            </div>
            <div class="fmright">
                <div class="fmr1">
                    <div class="fmr1_top">绑定银行卡</div>
                    <form class="layui-form" action="">
                        <table class="layui-table layui-table-add" lay-skin="line">
                            <tbody>
                                <tr>
                                    <th>选择解绑的银行卡</th>
                                    <td>
                                        <div style="width:100%">
                                            <select id="Bank_Id" class="layui-select" style="display:block">
                                                @for (int i = 0; i < Bank.Count; i++)
                                                {
                                                    <option value="@Bank[i].Bank_Id">@Bank[i].Bank_Num</option>
                                                }
                                            </select>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th>银行名称</th>
                                    <td>
                                        <span id="Bank_Name">&nbsp;自动识别</span>
                                        <img src="" id="logo" />
                                    </td>
                                </tr>
                                <tr>
                                    <th>归属地</th>
                                    <td>
                                        <span id="Bank_Form">&nbsp;自动识别</span>
                                    </td>
                                </tr>
                                <tr>
                                    <th>卡类型</th>
                                    <td>
                                        <span id="Bank_Type">&nbsp;自动识别</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <input type="button" value="解绑提交" id="commit" class="layui-btn" style="margin-left:40%" />
                    </form>
                </div>
                <div id="Div">
                    <div id="firstDiv" style="margin-top:10%"></div>
                </div>
            </div>
        </div>
    </div>
    <div id="mb"></div>
    <script type="text/javascript" src="~/js/jquery-2.1.1.min.js"></script>
    <script src="~/js/bootstrap.js"></script>
    <script src="~/js/bs4.pop.js"></script>
    <script>
        //调用银行卡api
        BankApi();
        //跳转方法
        function Jump() {
            window.location.href = "/Home/User_Bank";
        }

        //刷新方法
        function Reload() {
            window.location.reload(true);
        }

        //银行卡下拉框更改事件
        $("#Bank_Id").change(function () {
            //调用银行卡api
            BankApi();
        });

        //提交按钮点击事件
        $("#commit").click(function () {
            var data = {};
            data.Bank_Id = $("#Bank_Id").val();
            $.ajax({
                url: "/User/DelBank",
                type: "post",
                data: data,
                success: function (result) {
                    if (result.Success) {
                        $("#mb").css("display", "block");
                        bs4pop.notice('解绑成功！', { position: 'center' });
                        setTimeout(Jump, 2000);
                    }
                    else {
                        bs4pop.notice('系统繁忙,请稍后再试', { type: 'danger' });
                        setTimeout(Reload, 2000);
                    }
                }
            });
        });

        //银行卡api
        function BankApi() { 
            var xhr = new XMLHttpRequest();
            xhr.withCredentials = true;
            if (/*$.trim($("#card").val()).length < 16 || */$.trim($("#Bank_Id").find("option:selected").text()).length != 19) {

            } else {
                $.ajax({
                    async: true,
                    url: "https://cardinfo.market.alicloudapi.com/lianzhuo/querybankcard?bankno=" + $("#Bank_Id").find("option:selected").text(),
                    type: "GET",
                    headers: { Authorization: 'APPCODE 6b9a205c3c1041a7a8341ce17427b5ee' },
                    dataType: "json", // 返回的数据类型，设置为JSON方式
                    data: {
                        q: "javascript",
                        count: 1
                    },
                    success: function (result) {
                        console.log(result);
                        if (result != null) {
                            if (result.resp.code != 0) {
                                bs4pop.notice('系统繁忙,请稍后再试', { type: 'danger' });
                            }
                            else {
                                $("#Bank_Name").text(result.data.bank_name);
                                $("#Bank_Type").text(result.data.card_type);
                                $("#Bank_Form").text(result.data.area);
                                $("#logo").attr("src", result.data.bank_logo);
                            }
                        }

                    }
                });
            }
        }
    </script>
</body>
</html>
